/*
 * @Description:
 * @Author: Chetwyn
 * @Date: 2019-06-13 19:42:15
 * @LastEditors: Chetwyn
 * @LastEditTime: 2019-08-21 13:48:40
 */
import React from 'react';
import {
  Image,
  Platform,
  View,
  TouchableOpacity,
  StatusBar,
  StyleSheet,
} from 'react-native';
import { createStackNavigator, Header } from 'react-navigation';
import { RNCloseModule } from 'react-native-cgws-support';
import { wrapped } from '@cgws/react-native-watermark';

import { ic_back, ic_title_close } from '../assets';
import { getColors } from '../theme';
import { CustomerDetailContainer, CustomerContainer } from '../container';
import { get, find } from 'lodash';
import { getStore } from '../store';

const androidHeadreStyle = {
  height: Header.HEIGHT + StatusBar.currentHeight,
  paddingTop: StatusBar.currentHeight,
};
const headerStyle = Platform.OS === 'ios' ? {} : androidHeadreStyle;

export default (MyAppNavigator = props => {
  const state = getStore().getState();
  const hrName = get(state, ['common', 'hrName'], '');
  const hrId = get(state, ['common', 'hrId'], '');
  const wrap = wrapped({ title: `${hrName} ${hrId}` });

  const routeConfigMap = {
    Customer: {
      screen: wrap(CustomerContainer),
      navigationOptions: ({ navigation }) => ({
        title: '我的客户',
      }),
    },
    CustomerDetail: {
      screen: wrap(CustomerDetailContainer),
      navigationOptions: ({ navigation }) => ({
        title: '客户详情',
      }),
    },
  };

  let initialRouteName = get(props, ['params', 'page'], '');
  initialRouteName = find(
    Object.keys(routeConfigMap),
    item => item === initialRouteName
  );
  initialRouteName = initialRouteName || 'Customer';
  const initialRouteParams = get(props, 'params', {});

  let stackConfig = {
    initialRouteName,
    initialRouteParams,
    initialRouteKey: initialRouteName,
    headerLayoutPreset: 'center',
    navigationOptions: () => ({
      headerBackTitle: null,
      headerStyle: {
        backgroundColor: getColors().base_oc_11,
        elevation: 0,
        borderBottomColor: 'transparent',
        ...headerStyle,
      },
      headerTintColor: getColors().base_fc_5,
      headerTitleStyle: {
        fontSize: 18,
      },
      // headerTitleContainerStyle: {
      //   // android 56、iOS 70，这些值是在react-navigation-stack#Header#TITLE_OFFSET_CENTER_ALIGN定义的
      //   marginHorizontal: Platform.OS === 'android' ? 90 - 56 : 90 - 70,
      // },
      headerTitleAllowFontScaling: false, // 禁止字体缩放
      tabBarOptions: {
        allowFontScaling: false,
      },
      headerBackImage: <Image style={styles.backImage} source={ic_back} />,
      headerRight: (
        <View
          style={[styles.headerRight, { borderColor: getColors().base_lc_1 }]}
        >
          <TouchableOpacity
            style={styles.headerRightTouchable}
            onPress={() => RNCloseModule.close()}
          >
            <Image style={styles.headerRightImage} source={ic_title_close} />
          </TouchableOpacity>
        </View>
      ),
    }),
  };

  const Navigator = createStackNavigator(routeConfigMap, stackConfig);

  return <Navigator />;
});

const styles = StyleSheet.create({
  backImage: {
    width: 30,
    height: 30,
    marginLeft: Platform.OS === 'android' ? -7 : 6,
  },
  headerRight: {
    width: 32,
    height: 32,
    marginRight: 16,
    borderRadius: 32,
    borderWidth: 1,
  },
  headerRightTouchable: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerRightImage: {
    width: 16,
    height: 16,
  },
  headerRightDevider: {
    width: 1,
    height: 16,
    alignSelf: 'center',
  },
});
